<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <fieldset>
    <legend>Category</legend>
    <ul id="my-category">
      <li>Introduction</li>
      <li class="active">Key Concepts</li>
      <li>References</li>
      <li>External Links</li>
    </ul>
  </fieldset>

  <style>
    :root {
      --cate-color: #1B86F9;
      --cate-left-color: #eaeaea;
      --cate-bg: white;
    }

    ol,
    ul,
    li {
      list-style: none;
      padding: 0;
      margin: 0;
      border: 0;
      box-sizing: border-box;
      /* vertical-align: baseline; */
    }

    ul {
      border-left: 1px solid var(--cate-left-color);
    }

    li {
      display: flex;
      align-items: center;
      cursor: pointer;
    }

    .active {
      color: var(--cate-color);
    }

    .active::before {
      /* transform: scale(1) translate(0); */
      background-color: var(--cate-color);
    }

    li::before {
      content: "";
      border: 1px var(--cate-color) solid;
      background-color: var(--cate-bg);
      width: 9px;
      height: 9px;
      right: 6px;
      border-radius: 50%;
      display: block;
      position: relative;
      /* transition: transform 0.5s; */
    }

  </style>

  <script>
    const category = document.querySelector('#my-category');
    const clickHandler = (e) => {
      [].forEach.call(category.children, c => c.classList.remove('active'));
      e.target.classList.add('active');
    }
    category.addEventListener("click", clickHandler);

  </script>
</body>

</html>
